<template>
  <div>
    <el-menu
      :default-active='onSwitch'
      class='el-menu-header'
      mode='horizontal'
      router
    >
      <template v-for=' menu in menus '>
        <template>
          <el-menu-item :index='menu.index' :key='menu.index'>
            <i :class='menu.icon'></i>
            {{menu.title}}
<!--            <router-link to='/index'>首页</router-link>-->
          </el-menu-item>
        </template>
      </template>
      <span v-if='$store.state.userInfo' class='login'>
<!--        <span>{{$store.state.userInfo.userInfo.username}}</span>-->
<!--        <el-button @click='logoutHandler'>注销</el-button>-->
        <div class='user-avator'>
          <img :src='getHeaderImgUlr?getHeaderImgUlr:"https://www.woyaogexing.com/touxiang/katong/2020/1077964.html"'>
        </div>
        <el-dropdown class='user-name' trigger='click' @command='handleHeaderImgClick'>
          <span class='el-dropdown-link'>{{getUserName}}</span>
          <i class='el-icon-caret-bottom'></i>
          <el-dropdown-menu slot='dropdown'>
            <el-dropdown-item command='logout'>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </span>
      <span v-else class='login'>
        <el-button><router-link to='/login'>登陆</router-link></el-button>
        <el-button><router-link to='/login'>注册</router-link></el-button>
      </span>
    </el-menu>
  </div>
</template>

<script>
export default {
  data () {
    return {
      menus: [
        {
          icon: 'el-icon-document',
          index: 'index',
          title: '系统首页'
        },
        {
          icon: 'el-icon-document',
          index: 'user',
          title: '用户管理'
        },
        {
          icon: 'el-icon-document',
          index: 'role',
          title: '角色管理'
        },
        {
          icon: 'el-icon-document',
          index: 'permission',
          title: '权限管理'
        },
        {
          icon: 'el-icon-document',
          index: 'singer',
          title: '歌手管理'
        },
        {
          icon: 'el-icon-document',
          index: 'song',
          title: '歌曲管理'
        },
        {
          icon: 'el-icon-document',
          index: 'songList',
          title: '歌单管理'
        }
      ],
      activeIndex: 'index'
    }
  },
  created () {
    // 2021-06-07 fix:刷新页面跳转路由这里的问题
    // this.$router.push('/index')
  },
  computed: {
    onSwitch () {
      return this.$route.path.replace('/', '')
    },
    getHeaderImgUlr () {
      return this.$store.state.userInfo.userInfo.headImgUrl
    },
    getUserName () {
      return this.$store.state.userInfo.userInfo.username
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      // console.log(key, keyPath);
    },
    logout () {
      console.log('登出被执行!')
      this.$store.commit('REMOVE_USER_INFO')
      this.$router.push('/index')
    },
    handleHeaderImgClick (command) {
      if (command === 'logout') {
        console.log('logout')
        this.$store.commit('REMOVE_USER_INFO')
      }
    }
  }
}
</script>
<style scoped>

  .login {
    float: right;
  }
  .user-avator img{
    width: 40px;
    height: 40px;
    border-radius: 50px;
  }
  .user-name {
  }
  .el-dropdown-link{}

</style>
